<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由02</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <router-view></router-view>
    </div>

    <!-- 首页 -->
    <template id="home">
        <div>
            <h2>首页</h2>
            <router-link to="/news">新闻列表</router-link>
            <router-view></router-view>
        </div>
    </template>
    <script>
        var home = Vue.component('home', {
            template: '#home'
        });
    </script>

    <!-- 新闻列表 -->
    <template id="news">
        <div>
            <h3>新闻列表页</h3>
            <ul>
                <li>
                    <!-- /detail/:id -->
                    <router-link to="/detail/404">关于清明节放假的通知</router-link>
                </li>
                <li>
                    <router-link to="/detail/410">第xx届牡丹花会开幕式</router-link>
                </li>
                <li>
                    <router-link to="/detail/501">大盘鸡涨价了</router-link>
                </li>
            </ul>
            <button @click="toDpj()">大盘鸡</button>
            <button @click="toCf()">炒饭</button>
            <button @click="toMlt()">麻辣烫</button>
        </div>
    </template>
    <script>
        var news = Vue.component('news', {
            template: '#news',
            methods: {
                toDpj() {
                    this.$router.push({
                        name: '新闻详情',
                        params: {
                            num: 345354,
                            status: false,
                            msg: '大盘鸡到底涨价了没？'
                        }
                    });
                },
                toCf() {
                    this.$router.push({
                        name: '菜品详情',
                        params: {
                            price: 19.9,
                            msg: '炒饭这么贵？'
                        }
                    })
                },
                toMlt() {

                },
            }
        });
    </script>

    <!-- 菜品详情 -->
    <template id="content">
        <div>
            <h3>菜品</h3>
            <p>{{$route.params.price}}</p>
            <p>{{$route.params.msg}}</p>
        </div>
    </template>
    <script>
        var content = Vue.component('self-content', {
            template: '#content'
        });
    </script>


    <!-- 新闻详情页 -->
    <template id="news-detail">
        <div>
            <h3>新闻详情</h3>
            <p v-text="param"></p>
            <p v-text="$route.params.msg"></p>
        </div>
    </template>
    <script>
        var newsDetail = Vue.component('news-detail', {
            template: '#news-detail',
            data() {
                return {
                    param: this.$route.params.num
                }
            },
            // 数据和HTML挂载完成时的生命周期
            mounted() {
                // 常用于去服务器获取数据
                console.log('mounted...', this.$route);
            }
        });
    </script>



    <script>
        var router = new VueRouter({
            // 所有的路由组件
            routes: [
                {
                    path: '/',
                    name: '首页',
                    component: home
                },
                {
                    path: '/news',
                    name: '新闻列表', // 命名路由
                    component: news
                },
                // 动态路由
                // {
                //     path: '/detail/:num', // 加上:之后，表示 后面的是参数名
                //     name: '新闻详情',
                //     component: newsDetail
                // },
                // 普通路由传参，使用push({name:'xxx', parms:{数据}})
                {
                    path: '/detail', // 加上:之后，表示 后面的是参数名
                    name: '新闻详情',
                    component: newsDetail
                },
                {
                    path: '/content',
                    name: '菜品详情',
                    component: content
                }

            ]
        });
        var vue = new Vue({
            el: '#app',
            router // 路由
        });
        /*
            命名路由：name属性，可以使用中文，不能重复
            路由传参：
            1.动态路由路径：在路由的path中加上 /:参数
                加上参数设置之后，必须补全路径
                只要有路径的地方都可以拼接，但是只能传递字符串
                传递复杂参数时，显示方式会有问题
            2.编程式路由传参：this.$router.push(路由对象和参数)
                必须使用路由名称跳转，页面刷新之后，参数会消失
                安全性高

            *页面如果刷新，路径上有参数的才能取到，动态路由可以取到，push方式取不到



            路由接收参数：this.$route.params
            二级路由：
        */
    </script>
</body>

</html>